<style lang="scss" scoped>
.box {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  .list {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
  }
}
</style>

<template>
  <div class="box">
    <div class="content" :style="{ height: config.totalHeight + 'px' }"></div>
    <div class="list">
      <div
        v-for="item in renderData"
        :key="item.id"
        class="item"
        :style="{ height: itemHeight + 'px', borderBottom: '1px solid #ccc',textAlign: 'center',lineHeight: itemHeight + 'px'}"
      >
        {{ item.id }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive,ref } from 'vue'

const clientHeight = document.documentElement.clientHeight
const itemHeight = 60
const clientItemCount = Math.ceil(clientHeight / itemHeight)
const scrollTopRef=ref(0)
const sourceData = new Array(10000).fill(0).map((_, i) => {
  return { id: i + 1 }
})
const renderData = computed(() => {
  return sourceData.slice(config.startIndex, config.endIndex)
})
const config = reactive({
  startIndex: 0,
  endIndex: 0,
  totalHeight: 0,
})
const scroll=(e: any) => {
    const scrollTop = e.target.scrollTop
    config.startIndex = Math.floor(scrollTop / itemHeight)
    config.endIndex = config.startIndex + clientItemCount
}

onMounted(() => {
  config.totalHeight = clientItemCount * itemHeight
  config.endIndex = config.startIndex + clientItemCount
})
</script>
